<template>
    <div class="top-container" v-loading="isLoading">
      <div class="a-container" :key="item.id" v-for="item of imgList">
        <div class="img-container" :ref="'img_container_' + item.imgId">
          <div class="img-info">{{item.title}}</div>
          <div class="action-bar">
            <span>
              <i class="el-icon-download img-btn" @click="doDownload(item.imgPath)"></i>
            </span>
            <span>
              <i class="el-icon-star-off img-btn" @click="doAddLike(item)"></i>
            </span>
          </div>
        </div>
<!--        <div class="di-page-title"></div>-->
      </div>
    </div>
</template>

<script>
import {AppImgBaseUrl} from '../utils/AppConstant'
import {diImg} from '../utils/downloadImg'
const ImgContainerRefBase = 'img_container_'

export default {
  name: 'TopDownload',
  data () {
    return {
      isLoading: false,
      imgList: []
    }
  },
  computed: {
    userName: function () {
      return ''
    }
  },
  created () {
  },
  mounted () {
    this.loadTopDownload()
  },
  methods: {
    loadTopDownload () {
      const loadingRef = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(153, 153, 153, 0.7)'
      })
      this.$get('api/Index/top50', {}).then(list => {
        this.parseImgList(list)
      }).finally(() => {
        loadingRef.close()
      })
    },
    parseImgList (list) {
      this.imgList.splice(0, this.imgList.length)
      list.forEach(tmpV => {
        tmpV.img_url = AppImgBaseUrl + tmpV.imgPath
        tmpV.thumbnail = AppImgBaseUrl + 'thumbnail_' + tmpV.imgPath
        this.imgList.push(tmpV)
      })
      this.$nextTick(() => {
        this.imgList.forEach(value1 => {
          const tmpArr = this.$refs[ImgContainerRefBase + value1.imgId]
          if (tmpArr !== undefined && tmpArr.length > 0) {
            tmpArr[0].style.backgroundImage = `url(${value1.thumbnail})`
          }
        })
      })
    },
    doDownload (imgPath) {
      if (this.$store.getters.isLogined === false) {
        this.$router.push({name: 'Login'})
        return false
      }

      const isStarted = diImg(imgPath)
      if (isStarted === false) {
        this.$message.error('操作失败, 请下载DI Manager客户端来设置桌面壁纸')
      }
    },
    doAddLike (item) {
      if (this.$store.getters.isLogined === false) {
        this.$router.push({name: 'Login'})
        return false
      }

      this.isLoading = true
      this.$post('api/MyLikeVc/likeOrNotImg', {imgId: item.imgId, isAddToLike: 1}).then(resp => {
        this.$message.success('操作成功')
      }).finally(() => {
        this.isLoading = false
      })
    }
  }
}
</script>

<style scoped>
  .top-container {
    position: relative;
    overflow: auto;
    height: 100vh;
    right: -14px;
    left: 0px;
  }
  .di-page-title {
    background: white;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0px;
    right: 0px;
    transform: rotate(45deg) translate(-20px, -20px);
  }
</style>
